<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页-百度地图</title>
</head>
<body>

<div id="map" style="height: 400px;"></div>

<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=b7drqKtNxm01mnrZgC01YjIAEWxEcFhf"></script>
<script>
    // 创建Map实例
    let map = new BMap.Map("map");
    // 初始化地图,设置中心点坐标和地图级别
    // map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    //根据城市名设置地图中心
    map.centerAndZoom("成都",15);
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);

    // 根据浏览器定位
    let geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            let mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})

    // 添加比例尺
    let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT,offset:{width:30,height:30}});// 左上角，添加比例尺
    map.addControl(top_left_control);
    //添加一个缩放控件
    let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    map.addControl(top_left_navigation);
</script>
</body>
</html>